<template>
  <div class="info-item card-item">
    <div class="title-info">
      <svg-icon name="home-guideInfo"></svg-icon>
      <span class="sub-title">攻略信息</span>
    </div>

    <div class="info guide-info">
      <div class="guide-item">
        <span class="guide-title">交通指南</span>
        <div v-if="travelStore.currentTravelSpot.traffic" class="guide-content">
          {{ travelStore.currentTravelSpot.traffic }}
        </div>
        <div v-else class="guide-content">
          <el-tag>无</el-tag>
        </div>
      </div>

      <div class="guide-item">
        <span class="guide-title">游玩路线</span>
        <div v-if="travelStore.currentTravelSpot.router" class="guide-content">
          {{ travelStore.currentTravelSpot.router }}
        </div>
        <div v-else class="guide-content">
          <el-tag>无</el-tag>
        </div>
      </div>

      <div class="guide-item">
        <span class="guide-title">美食推荐</span>
        <div v-if="travelStore.currentTravelSpot.foods.length > 0"
             class="guide-content">
          <el-tag v-for="(item, index) in travelStore.currentTravelSpot.foods"
                  :key="index" size="large">
            {{ item }}
          </el-tag>
        </div>
        <div v-else class="guide-content">
          <el-tag>无</el-tag>
        </div>
      </div>

      <div class="guide-item">
        <span class="guide-title">项目推荐</span>
        <div v-if="travelStore.currentTravelSpot.projects.length > 0"
             class="guide-content">
          <el-tag v-for="(item, index) in travelStore.currentTravelSpot.projects"
                  :key="index" size="large">
            {{ item }}
          </el-tag>
        </div>
        <div v-else class="guide-content">
          <el-tag>无</el-tag>
        </div>
      </div>

      <div class="guide-item">
        <span class="guide-title">其他</span>
        <div class="guide-content">
          <el-tag v-if="travelStore.currentTravelSpot.remark"
                  size="large">
            {{ travelStore.currentTravelSpot.remark }}
          </el-tag>
          <el-tag v-else>无</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { SvgIcon } from 'vue3-common'
import { useTravelStore } from '@/store/travel.ts'

const travelStore = useTravelStore()
</script>
